<template>
    <div class="btnContainerBox">
        <template v-for="(btn, index) of buttons">
            <!-- 当按钮的数量小于最大数时，或者显示最后一个按钮 -->
            <template v-if="index <= buttonCount - 1 ">
                <div
                    :class="{ 'bpm-task-button': true, }"
                    :key="btn.btnId"
                    @click="handMethod(btn)"
                >
                    <a-icon type="loading" v-if="getLoading(btn)" />
                    <custom-button-style :btn="btn" :customBtnConfig="customBtnConfig"></custom-button-style>
                </div>
            </template>
        </template>
        <a-dropdown v-if="buttons.length>buttonCount">
            <a class="ant-dropdown-link" @click="(e) => e.preventDefault()"> 更多 <a-icon type="down" /> </a>
            <a-menu slot="overlay">
                <template v-for="(innerBtn, index) of buttons">
                    <a-menu-item v-if="index > buttonCount - 1 ">
                        <div :key="innerBtn.id" @click="handMethod(innerBtn)">
                            <custom-button-style :btn="innerBtn" :customBtnConfig="customBtnConfig"></custom-button-style>
                        </div>
                    </a-menu-item>
                </template>
            </a-menu>
        </a-dropdown>
    </div>
</template>

<script>
import { Util, RxSpin, RxTextList,App } from "@lowcode/jpaas-common-lib"
import i18nEdit from "@/views/modules/i18n/i18nEdit"
import customButtonStyle from "./customButtonStyle"
import {mapState,mapMutations} from 'vuex';

export default {
    name: 'CustomToolBar',
    mixins: [i18nEdit,App],
    components: {
        RxSpin,
        RxTextList,
        customButtonStyle
    },
    props: {
        customBtnConfig: { type: Object },
    },
    computed: {
        ...mapState({
            appKey: (state) => (state.appSetting ? state.appSetting.appKey : ''),
            navigation: state => state.appSetting.navigation,
            frontType: state => state.appSetting.frontType
        }),
        tabNavs(){
            return this.navigation[this.frontType];
        },
    },
    data() {
        return {
            buttons: [],
            config:{},
            buttonCount:1,//显示按钮数量
        }
    },
    created() {
        this.config =this.customBtnConfig;
        this.init();
    },
    methods: {
        ...mapMutations('appSetting',['setActiveKey']),
        init(){
            let customBtnJson = JSON.parse(this.config.customBtnJson);
            this.buttons=customBtnJson.btnConfig;
            this.buttonCount = customBtnJson.maxButton;
        },
        changeConfig(activeObj){
            this.buttons=[];
            this.config =activeObj;
            this.init();
        },
        handMethod(btn){
            //默认按钮
            if(btn.isDefault){
                this[btn.btnClick](btn);
                return;
            }

            //调用预定义方法。
            this.$emit("handleCustomFun",btn);
        },
        //刷新
        custBtnRefreshBtn(){
            this.$emit("refreshChange");
        },
        //跳转
        custBtnMoreBtn(btn){
            if(!btn.btnPreCond || !btn.btnPreCond.mode|| !btn.btnPreCond.component ){
                return;
            }
            if("url" ==btn.btnPreCond.mode){
                //跳转到外部url
                window.open(btn.btnPreCond.component, '_blank');
                return;
            }else if("vue" ==btn.btnPreCond.mode){
                //跳转到自定义vue页面
                var action = "viemvue";
                let appId = this.curApp.appId;
                let viemUrl = btn.btnPreCond.component;
                let rootUrl=process.env.VUE_APP_ADMIN_FRONT +"/customvue/workbench/viemvue?appId=" + appId+"&action="+action+"&viemUrl="+viemUrl;
                window.open(rootUrl,"_blank" );
            }
            //跳转到指定路由
            let obj = {
                collapsed:true,
                key:btn.btnPreCond.component,
                title:this.$i18(btn.btnPreCond.name,'菜单名称'),
                showType:'URL',
            }
            this.setActiveKey(obj.key)
            let isIndex = this.tabNavs.findIndex(nav=>{return nav.key == obj.key})
            if(isIndex<0){
                this.navigation[this.frontType].push(obj);
            }
            this.$router.push({
                name: obj.key
            })
        },
        getLoading(btn) {
            if (!btn.hasOwnProperty('loading')) {
                return false
            }
            return this[btn.loading]
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, 'bpmInst', key)
        },
    },

}
</script>

<style scoped>
.btnContainerBox {
    display: flex;
    height: 43px;
    align-items: center;
}
.bpm-task-button {
   margin: 0px 5px;
}
.bpm-task-button.bpm-task-button-primary {
    background-color: #4285f4;
    color: #fff;
    border-radius: 4px;
}
.ant-dropdown-link {
    padding: 0 12px;
}

.spinContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding-top: 40px;
    text-align: center;
}
.spinCenter {
    text-align: left;
    display: inline-block;
    padding: 10px;
    border-radius: 3px;
    background: #fff;
    position: absolute;
    box-shadow: 0px 0px 5px #ddd;
    top: 40%;
}
</style>